
<template>
    <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
      <h2>地址：{{address}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">年龄+1</button>
      <button @click="showTel">点我查看联系方式</button>
    </div>
  </template>
  
  <script lang="ts" setup>
// 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
  import {ref} from 'vue'
  let name = ref('张三')
  let age = ref(18)
  let tel = '13888888888'
  let address = '北京昌平区宏福苑·宏福科技园'

  // 方法
  function changeName() {
    name.value =  'zhang-3' //注意：这样修改name，页面是没有变化的
    console.log(name.value) //name确实改了，但name不是响应式的
  }
  function changeAge() {
    age.value += 1 //注意：这样修改age，页面是没有变化的
    console.log(age.value) //age确实改了，但age不是响应式的
  }
  function showTel() {
    alert(tel)
  }
  </script>